<template>
	<view>
		<!-- 大标题 -->
		<view class="title">
			<text class="txt" >{{title}}</text>
			<view class="moer" @click="onClickIcon">
				<text>更多</text>
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>
		
		<!-- 下划线 -->
		<u-line color="#D0587C"></u-line>
		<!-- 项 -->
		<u-scroll-list indicatorActiveColor="#D0587C" 
		indicatorStyle ="display:none;">
			<!-- 此处循环 -->
			<view v-for="(item, index) in list" :key="index">
				<!-- 此处是图片 -->
				<view class="imgstyle" @click="imgClickFn(item)">
					<u--image bgColor="#D0587C" radius="30rpx" :showLoading="true" :src="item" width="90px" height="90px" :lazy-load="true"></u--image>
				</view>
			</view>
		</u-scroll-list>
		<!-- 这里存放可以被展示的信息 -->
		<view class="moreimages">
			<u-overlay :show="show" @click="show=false">
				<image :src="imgSrc" mode="aspectFit" class="imgstyles"></image>
			</u-overlay>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"type",
		data() {
			return {
				indicator: false,
				show: false,
				imgSrc:''
			};
		},
		props:['title','list'],
		methods:{
			imgClickFn(e){
				console.log(e);
				this.show=true
				this.imgSrc=e
			},
			onClickIcon(){
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
				
						url: `/pages/topck/topck?type=其他`
					})
				} else {
					uni.showModal({
						title: '登录提示',
						content: '您还没有进行登录,是否进行登录',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/user/user'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.imgstyle{
	padding: 40rpx 14rpx;
	background-color: rgba(208,88,124,0.1);
}
.txt {
	padding:0 40rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	font-weight: bold;
	background-color: rgba(208,88,124,0.1);
	display: block;
	color: #dc797c;
}
.title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 30rpx;
}
.moer{
	display: flex;
	align-items: center;
	text{
		color: #ff5500;
		margin-right: 20rpx;
	}
}
.imgstyles{
	display: block;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%);
	transform: translateX(-50%);
}
</style>